<template>
  <el-container>
    <el-header height="80px" style="background-color: white">
      <div  style="position: fixed;
                  top: 0;
                  z-index: 999;
                  width: 100%;
                  min-width: 1200px;
                  background-color: #fff;
                  border-bottom: 1px solid #d8d8d8;">
        <el-row :gutter="20">
          <el-col :span="6">
            <router-link to="/">
              <img src="/imgs/icon.png" width="200">
            </router-link>
          </el-col>
          <el-col :span="10">
            <el-menu mode="horizontal" active-text-color="orange">

              <el-menu-item index="1">
                <router-link to="/index">首页</router-link>
              </el-menu-item>
              <el-menu-item index="2">
                <router-link to="/classify">电影</router-link>
              </el-menu-item>
              <el-menu-item index="3">
                <router-link to="cinemas">影院</router-link>
              </el-menu-item>
              <el-menu-item index="4">
                <router-link to="/best">影评</router-link>
              </el-menu-item>
              <el-menu-item index="5">
                  <div>
                    地区
                  </div>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <el-input style="position: relative;top: 15px" placeholder="请输入搜索关键字">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-popover
                placement="top-start"
                title="欢迎来到昌盛电影！"
                :width="200"
                trigger="hover"
            >
              <template #reference>
                <el-icon style="position: relative;top: 15px" :size="30"><User/></el-icon>
              </template>
              <el-button type="info" @click="router.push('/reg')">注册</el-button>
              <el-button type="warning" @click="router.push('/login')">登录</el-button>
            </el-popover>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
    <el-footer style="background-color: black;height: 280px;padding: 50px 0">
      <div style="width: 1200px;margin: 0 auto;color: #666;text-align: center">
        <el-row>
          <el-col :span="12" id="footer-center">
            <el-row>
              <el-col :span="8">
                <h3>关于我们</h3>
                <p>董事会成员</p>
                <p>投资者关系</p>
                <p>分类信息</p>
                <p>商务合作邮箱：v@maoyan.com </p>
                <p> 客服电话：10105335 </p>
              </el-col>
              <el-col :span="8">
                <h3>服务与支持</h3>
                <p>联系我们</p>
                <p>广告投放</p>
                <p>用户协议</p>
                <p>友情链接</p>
                <p>在线反馈</p>
              </el-col>
              <el-col :span="8">
                <h3>用户举报</h3>
                <p>违法和不良信息/涉未成年人有害信息举报电话：4006018900</p>
                <p>涉未成年人有害信息举报邮箱：tousujubao@meituan.com</p>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <p style="font-size: 60px;margin: 0"><span style="color: orange">星辰</span>电影</p>
            <p>电影行业社区平台</p>
          </el-col>
        </el-row>

      </div>

    </el-footer>
  </el-container>
</template>

<script setup>
import router from "@/router";


import {
  Search
} from '@element-plus/icons-vue'
</script>
<style>
footer h3{color: white}
#footer-center p{margin: 5px 0}
a{
  text-decoration: none;
}
</style>